<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询商品</title>
</head>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/vue/axios-0.18.0.js"></script>
<script src="../plugins/elementui/index.js"></script>
<body>
<div id="goods">
    <input id="id" type=text >
    <input style="font-size: x-small;"  @click="findById()" type="button" value="搜索"><br>
    <h>商品id:{{sku.id}}</h><br>
    <h>商品SKU名称:{{sku.name}}</h><br>
    <h>商品价格（分）:{{sku.price}}</h><br>
    <h>商品库存数量:{{sku.num}}</h><br>
    <h>商品库存预警数量:{{sku.alertNum}}</h><br>
    <h>商品图片:{{sku.image}}</h><br>
    <h>商品创建时间:{{sku.createTime}}</h><br>
    <h>商品更新时间:{{sku.updateTime}}</h><br>
    <h>商品SPUID:{{sku.spuId}}</h><br>
    <h>商品类目id:{{sku.categoryId}}</h><br>
    <h>商品类目名称:{{sku.categoryName}}</h><br>
    <h>品牌名称:{{sku.brandName}}</h><br>
    <h>规格:{{sku.spec}}</h><br>
    <h>销量:{{sku.saleNum}}</h><br>
    <h>评论数:{{sku.commentNum}}</h><br>
    <h>商品状态:{{sku.status}}</h><br>



</div>
<script>
    var vue = new Vue({
        el:'#goods',
        data:{
            sku:{}
        },
        methods:{

            findById(){
                var id = document.getElementById("id").value;
                axios.get("/findById/"+id).then((res)=>{
                    this.sku =res.data;
                })
            }
        }
    });
</script>

</body>
</html>